<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Viability Score – powered by D&amp;B Direct</title>
    <script type="text/javascript" src="../../lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../lib/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../../lib/knockout.mapping-2.4.1.js"></script>
    <script type="text/javascript" src="../../lib/bs3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../lib/bs3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="../../lib/select2-3.4.1/select2.js"></script>
    <link rel="stylesheet" href="../../lib/select2-3.4.1/select2.css" />
    <link rel="stylesheet" href="../../assets/css/main.css" />
<!--
    <script type="text/javascript" src="../../rest/token.php"></script>
-->
    <script type="text/javascript" src="../../dnbapi-2.0.0.js">{API_BASE:'../../rest/proxy.php/'}</script>
    <script type="text/javascript" src="../../lib/direct/demo.js"></script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="http://dnb.com/favicon.ico" type="image/x-icon"/>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2>D&amp;B Direct Viability Score Example</h2>
                <div class="well">
                    <div class="pull-right">
                        <i class="icon-signin" onclick="DNB.Demo.signin()"></i>
                    </div>
                    <form class="x-dnb-search">
                        <input type="text" data-bind="value: duns, dnb-type-ahead: 1" style="width:300px" />
                    </form>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-8">
                <div class="panel x-dnb-viab-rat" id="x-dnb-viab-rat">
    <div class="panel-heading">
        <h3 class="panel-title">D&amp;B Viability Rating
            <!-- ko if: assessment.loaded() -->
            <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
            <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization -->
                for
                <!-- ko text: OrganizationName.OrganizationPrimaryName()[0].OrganizationName.$ -->
                <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
        </h3>
    </div>
    <ul class="nav nav-pills nav-justified" id="myTab">
        <li class="active"><a href="#home" data-toggle="pill">
            <div class="dnb-badge-stack dnb-badge-stack-large">
                <!-- ko if: assessment.loaded() -->
                <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
                <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.ViabilityScore -->
                <div class="dnb-badge" data-bind="style: { color: DNB.Util.viabToColor(ClassScore) }"></div>
                <div class="dnb-badge-label" data-bind="text: ClassScore, attr : { title : RiskLevelDescription.$ } ">-</div>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </div>
            Viability<br />Score
        </a></li>
        <li><a href="#profile" data-toggle="pill">
            <div class="dnb-badge-stack dnb-badge-stack-large">
                <!-- ko if: assessment.loaded() -->
                <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
                <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.PortfolioComparisonScore -->
                <div class="dnb-badge" data-bind="style: { color: DNB.Util.viabToColor(ClassScore) }"></div>
                <div class="dnb-badge-label" data-bind="text: ClassScore, attr : { title : RiskLevelDescription.$ } ">-</div>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </div>
            Portfolio<br />Comparison
        </a></li>

        <li><a href="#messages" data-toggle="pill">
            <div class="dnb-badge-stack dnb-badge-stack-large">
                <!-- ko if: assessment.loaded() -->
                <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
                <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.DataDepthDetail -->
                <div class="dnb-badge" data-bind="style: { color: DNB.Util.viabToColor(DataDepthIndicator) }"></div>
                <div class="dnb-badge-label" data-bind="text: DataDepthIndicator, attr : { title : AssessmentText().join(', ') } ">-</div>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                </div>
                Data Depth<br />Comparison
                </a></li>

          <li><a href="#settings" data-toggle="pill">
            <div class="dnb-badge-stack dnb-badge-stack-large">
                <!-- ko if: assessment.loaded() -->
                <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
                <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.OrganizationProfileDetail -->
                <div class="dnb-badge" data-bind="style: { color: DNB.Util.viabToColor(OrganizationProfileRating) }"></div>
                <div class="dnb-badge-label" data-bind="text: OrganizationProfileRating ">-</div>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </div>
            Company<br />Profile
            </a></li>
        </ul>

  <div class="panel-body">
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <!-- ko if: assessment.loaded() -->
    <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
    <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.ViabilityScore -->
    <div class="dnb-risk-gradient">
        <div class="dnb-risk-gradient-inner">
        </div>
        <div class="dnb-risk-gradient-badge-container" data-bind="{style:{left:DNB.Util.viabToPct(ClassScore)}}">
            <div class="dnb-risk-gradient-badge">
                <div class="dnb-risk-gradient-badge-label" data-bind="text: ClassScore">
                </div>
            </div>
        </div>
    </div>
    The D&amp;B Viability Score is a predictive rating of 1-9 where 1 is the lowest probability of going out of business or becoming inactive over the next 12 months compared to approximately 30M US businesses in D&amp;B’s database and 9 is highest probability of going out of business or becoming inactive.

    <table class="table table-hover">
        <tbody data-bind="foreach: DNB.Util.flatten($data)">
            <tr>
                <td data-bind="text: friendlyName, style:{paddingLeft: (16 * indent) + 'px'}"></td>
                <td data-bind="text: value"></td>
            </tr>
        </tbody>
    </table>
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
  </div>
  <div class="tab-pane" id="profile">
    <!-- ko if: assessment.loaded() -->
    <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
    <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.PortfolioComparisonScore -->
    <div class="dnb-risk-gradient">
        <div class="dnb-risk-gradient-inner">
        </div>
        <div class="dnb-risk-gradient-badge-container" data-bind="{style:{left:DNB.Util.viabToPct(ClassScore)}}">
            <div class="dnb-risk-gradient-badge">
                <div class="dnb-risk-gradient-badge-label" data-bind="text: ClassScore">
                </div>
            </div>
        </div>
    </div>
    The D&amp;B Portfolio Comparison is a predictive rating of 1-9 where 1 is the lowest probability of going out of business or becoming inactive over the next 12 months compared to other businesses within the same model segment and 9 is the highest probability of going out of business or becoming inactive.

    <table class="table table-hover">
        <tbody data-bind="foreach: DNB.Util.flatten($data)">
            <tr>
                <td data-bind="text: friendlyName, style:{paddingLeft: (16 * indent) + 'px'}"></td>
                <td data-bind="text: value"></td>
            </tr>
        </tbody>
    </table>
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->

  </div>
  <div class="tab-pane" id="messages">
    <!-- ko if: assessment.loaded() -->
    <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
    <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.DataDepthDetail -->
    <div class="dnb-risk-gradient">
        <div class="dnb-risk-gradient-inner">
        </div>
        <div class="dnb-risk-gradient-badge-container" data-bind="{style:{left:DNB.Util.viabToPct(DataDepthIndicator)}}">
            <div class="dnb-risk-gradient-badge">
                <div class="dnb-risk-gradient-badge-label" data-bind="text: DataDepthIndicator">
                </div>
            </div>
        </div>
    </div>
    The D&amp;B Data Depth Indicator is a descriptive rating of A-G and H-M. A-G is assigned on a “report card-like” scale where A is assigned to businesses with the highest level of predictive data including compete firmographics, extensive commercial trading activity, and comprehensive financial attributes and G is assigned to business with the lowest level of predictive data including basic identify data only. H-M are special categories that override the A-G rating giving our customer’s further insight when D&amp;B has confirmation that a business has met one of six risk conditions.

    <table class="table table-hover">
        <tbody data-bind="foreach: DNB.Util.flatten($data)">
            <tr>
                <td data-bind="text: friendlyName, style:{paddingLeft: (16 * indent) + 'px'}"></td>
                <td data-bind="text: value"></td>
            </tr>
        </tbody>
    </table>
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
  </div>
  <div class="tab-pane" id="settings">
    <!-- ko if: assessment.loaded() -->
    <!-- ko if: assessment.data().OrderProductResponse.OrderProductResponseDetail -->
    <!-- ko with: assessment.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment.DNBViabilityRating.OrganizationProfileDetail -->
    <div class="dnb-risk-gradient">
        <div class="dnb-risk-gradient-inner">
        </div>
        <div class="dnb-risk-gradient-badge-container" data-bind="{style:{left:DNB.Util.viabToPct(OrganizationProfileRating)}}">
            <div class="dnb-risk-gradient-badge">
                <div class="dnb-risk-gradient-badge-label" data-bind="text: OrganizationProfileRating">
                </div>
            </div>
        </div>
    </div>
    The D&amp;B Company Profile: descriptive rating A-X and Y-Z where A is the largest, most established businesses with complete, comprehensive data reported in the D&amp;B database and X is the smallest, youngest businesses with basic firmographic data only. Y is assigned to a branch location and Z is assigned to a business that is a subsidiary.

    <table class="table table-hover">
        <tbody data-bind="foreach: DNB.Util.flatten($data)">
            <tr>
                <td data-bind="text: friendlyName, style:{paddingLeft: (16 * indent) + 'px'}"></td>
                <td data-bind="text: value"></td>
            </tr>
        </tbody>
    </table>
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
  </div>
</div>


  </div>

    <!-- ko if: assessment.loading() -->
    <div class="panel-body">
        <div class="dnb-loading"></div>
    </div>
    <!-- /ko -->

    <!-- ko if: assessment.error() -->
    <!-- ko if: assessment.data().errors -->
    <div class="panel-body">
        <h3>Error</h3>
        <div data-bind="foreach: assessment.data().errors">
            <div class="alert alert-danger" data-bind="html: $data"></div>
        </div>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>

<script type="text/javascript">
    function ViewModel(duns)
    {
        var self = this;
        self.duns = ko.observable(duns);
        self.assessment = DNB.Api.ko('V3.0/organizations/{duns}/products/VIAB_RAT?CountryISOAlpha2Code=US&ApplicationTransactionId=automation', self);// 'OrderProductResponse.OrderProductResponseDetail.Product.Organization.Assessment');
    }

    function DriverViewModel(assessmentVm)
    {
        var self = this;
        self.duns = ko.observable('');
        ko.computed(function(){
            var duns = self.duns();
            if (duns)
                assessmentVm.duns(duns);
        });
    }

    var duns_number = 804735132;

    $(function(){
        var assessmentVm = new ViewModel(duns_number);
        ko.applyBindings(assessmentVm, $('#x-dnb-viab-rat')[0]);



        var vm = new DriverViewModel(assessmentVm);
        ko.applyBindings(vm, $('.x-dnb-search')[0]);
    });
</script>
            </div>
            <div class="col-lg-4">
                <h4>About The D&amp;B Viability Score</h4> <p> The D&amp;B Viability Rating is a multi-dimensional rating that delivers a highly insightful and reliable assessment of a company’s future viability. The predictive components predict the likelihood that a company will go out of business, become inactive, or file for bankruptcy over the next 12 months. The descriptive components provide an indication of the amount of predictive data available to make a reliable risk assessment, as well as insight into the age, type and size of business. </p>
<h4>Additional Resources</h4> <ul> <li><a href="http://developer.dnb.com/docs/2.0/assessment/3.0/viability">D&amp;B Direct 2.0 API Documentation</a></li> <li><a href="http://dnbdirect.github.io/">D&amp;B Direct 2.0 SDK</a></li> </ul>
            </div>
        </div>

    </div>


<div id="signinModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">D&amp;B Direct Microapp Sign-In</h4>
      </div>
      <div class="modal-body">

<form id="signin">
    <label>Username:</label><br/>
    <input type="text" name="username" /><br /><br />
    <label>Password:</label><br/>
    <input type="password" name="password" /><br /><br />
    <input type="submit" style="visibility:hidden" />
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">$('#signinModal .btn-primary').click(function(){$('#signinModal form').submit()});</script>

    
</body>
</html>
